/*
 * Ext JS Library 2.1 Copyright(c) 2006-2008, Ext JS, LLC. licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.onReady(function() {
  Ext.QuickTips.init();

  function formatDate(value) {
    return value ? value.dateFormat('M d, Y') : '';
  };
  // shorthand alias
  var fm = Ext.form;

  // custom column plugin example
  var checkColumn = new Ext.grid.CheckColumn({
    header : "Indoor?",
    dataIndex : 'indoor',
    width : 55
  });

  // custom plugin Ext.ux.ProgressColumn example
  var growthColumn = new Ext.ux.grid.ProgressColumn({
    header : "Growth",
    dataIndex : 'growth',
    width : 85,
    textPst : '%', // string added to the end of the cell value (defaults to '%')
    actionEvent: 'click', // click event (defaults to 'dblclick')
    colored : true, // True for pretty colors, false for just blue (defaults to false)
    editor : new Ext.form.TextField() // Define an editor if you want to edit
  });

  // the column model has information about grid columns
  // dataIndex maps the column to the specific data field in
  // the data store (created below)
  var cm = new Ext.grid.ColumnModel([{
    id : 'common',
    header : "Common Name",
    dataIndex : 'common',
    width : 220,
    editor : new fm.TextField({
      allowBlank : false
    })
  }, {
    header : "Light",
    dataIndex : 'light',
    width : 130,
    editor : new Ext.form.ComboBox({
      typeAhead : true,
      triggerAction : 'all',
      transform : 'light',
      lazyRender : true,
      listClass : 'x-combo-list-small'
    })
  }, {
    header : "Price",
    dataIndex : 'price',
    width : 70,
    align : 'right',
    renderer : 'usMoney',
    editor : new fm.NumberField({
      allowBlank : false,
      allowNegative : false,
      maxValue : 100000
    })
  }, {
    header : "Available",
    dataIndex : 'availDate',
    width : 95,
    renderer : formatDate,
    editor : new fm.DateField({
      format : 'm/d/y',
      minValue : '01/01/06',
      disabledDays : [0, 6],
      disabledDaysText : 'Plants are not available on the weekends'
    })
  }, checkColumn, growthColumn]);

  // by default columns are sortable
  cm.defaultSortable = true;

  // this could be inline, but we want to define the Plant record
  // type so we can add records dynamically
  var Plant = Ext.data.Record.create([
      // the "name" below matches the tag name to read, except "availDate"
      // which is mapped to the tag "availability"
      {
        name : 'common',
        type : 'string'
      }, {
        name : 'botanical',
        type : 'string'
      }, {
        name : 'light'
      }, {
        name : 'price',
        type : 'float'
      }, // automatic date conversions
      {
        name : 'availDate',
        mapping : 'availability',
        type : 'date',
        dateFormat : 'm/d/Y'
      }, {
        name : 'indoor',
        type : 'bool'
      }, {
        name : 'growth',
        type : 'int'
      }]);

  // create the Data Store
  var store = new Ext.data.Store({
    // load using HTTP
    url : 'plants.xml',

    // the return will be XML, so lets set up a reader
    reader : new Ext.data.XmlReader({
      // records will have a "plant" tag
      record : 'plant'
    }, Plant),

    sortInfo : {
      field : 'common',
      direction : 'ASC'
    }
  });

  // create the editor grid
  var grid = new Ext.grid.EditorGridPanel({
    store : store,
    cm : cm,
    renderTo : 'editor-grid',
    width : 700,
    height : 400,
    autoExpandColumn : 'common',
    title : 'Progress Grid',
    frame : true,
    plugins : [checkColumn, growthColumn],
    clicksToEdit : 1,

    tbar : [{
      text : 'Add Plant',
      handler : function() {
        var p = new Plant({
          common : 'New Plant 1',
          light : 'Mostly Shade',
          price : 0,
          availDate : (new Date()).clearTime(),
          indoor : false
        });
        grid.stopEditing();
        store.insert(0, p);
        grid.startEditing(0, 0);
      }
    }]
  });

  // trigger the data store load
  store.load();
});

Ext.grid.CheckColumn = function(config) {
  Ext.apply(this, config);
  if (!this.id) {
    this.id = Ext.id();
  }
  this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype = {
  init : function(grid) {
    this.grid = grid;
    this.grid.on('render', function() {
      var view = this.grid.getView();
      view.mainBody.on('mousedown', this.onMouseDown, this);
    }, this);
  },

  onMouseDown : function(e, t) {
    if (t.className && t.className.indexOf('x-grid3-cc-' + this.id) != -1) {
      e.stopEvent();
      var index = this.grid.getView().findRowIndex(t);
      var record = this.grid.store.getAt(index);
      record.set(this.dataIndex, !record.data[this.dataIndex]);
    }
  },

  renderer : function(v, p, record) {
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-cc-' + this.id + '">&#160;</div>';
  }
};